<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/css/Register.css">
    <title>注册</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"
        integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="register-container">
        <div class="cute-dragon">
            <img src="../images/register.gif" alt="奶龙图片" class="naidragon-image">
        </div>
        <form>
            <span>
                <i class="fa-regular fa-user"></i>
                <input type="text" placeholder="用户名" name="username" id="username" required>
            </span>
            <br>
            <div id="feedback"></div>
            <span>
                <i class="fa-solid fa-lock"></i>
                <input type="password" placeholder="密码" name="password" required>
            </span>
            <br>
            <span>
                <i class="fa-solid fa-envelope"></i>
                <input type="email" placeholder="邮箱" name="email" required>
            </span>
            <br>
            <span>
                <i class="fa-solid fa-calendar-alt"></i>
                <input type="number" placeholder="年龄" name="age" required min="1">
            </span>
            <br>
            <span>
                <i class="fa-solid fa-user" style="margin-right: 5px; font-size: 20px; color: #333;"></i>
                <select name="responsibility" required>
                    <option value="" disabled selected>身份选择</option>
                    <option value="user">用户</option>
                    <option value="merchant">商家</option>
                </select>
            </span>
            <br>

            <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
                <i class="fa-solid fa-shield" style="margin-right: 5px; font-size: 20px; color: #333;"></i>
                <input type="text" name="captcha" id="captcha" placeholder="请输入验证码"
                    style="width: 160px; height: 30px; margin-right: 10px;" required />
                <img src="http://localhost:8088/user/captcha" id="captchaImage" alt="验证码" style="height: 30px; width: 80px; cursor: pointer;" title="点击刷新验证码" />
            </div>
            <input type="submit" value="注册">
        </form>
        <div class="footer-text">
            <a href="./login.html"> 已经有账号？立即登录！</a>
        </div>
    </div>

    <div class="mouse-follow-icon" id="mouse-follow-icon"
        style="display: inline-flex; align-items: center; justify-content: center;">
        <img style="width: 25px !important; height: auto !important; border-radius: 50%;" src="../images/cursor.gif"
            alt="跟随鼠标的GIF" />
    </div>

    <script src="/js/page/register/index.js"></script>
    <script src="https://kit.fontawesome.com/8c320534de.js" crossorigin="anonymous"></script>
</body>

</html>